<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>作业详情 - AI智能教学培训系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
        }

        body {
            background-color: #f5f7fb;
            color: var(--dark);
        }

        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            z-index: 100;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }

        .logo-container {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-icon {
            margin-right: 10px;
            font-size: 28px;
        }

        .nav-menu {
            padding: 20px 0;
        }

        .nav-item {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            border-left: 4px solid transparent;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid var(--accent);
        }

        .nav-icon {
            margin-right: 12px;
            font-size: 18px;
        }
        .main-content {
            flex: 1;
            margin-left: 260px;
            padding: 30px;
            transition: all 0.3s;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .page-title {
            font-size: 28px;
            font-weight: 600;
            color: var(--dark);
        }

        .exam-info {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .question-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .question-text {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .options label {
            display: block;
            margin-bottom: 8px;
        }

        .submit-btn {
            margin-top: 20px;
        }
        /* 侧边栏链接无下划线且不变色 */
        a.nav-item {
            text-decoration: none;
            color: inherit;
        }
        a.nav-item:visited,
        a.nav-item:active,
        a.nav-item:focus {
            color: inherit;
        }
    </style>
</head>
<body>
<div class="app-container">
    <div id="sidebar" class="sidebar"></div>
    <div class="main-content">
        <div class="assignment-detail-card">
            <a href="task.html" class="back-btn">← 返回作业列表</a>
            <div class="page-title" id="assignment-title">作业详情</div>
            <div class="detail-desc" id="assignment-desc"></div>
            <hr style="margin: 20px 0;">
            <div class="question-list" id="assignment-questions"></div>
        </div>
    </div>
</div>
<script>
    // 动态加载侧边栏
    fetch('sidebar.html').then(r=>r.text()).then(html=>{document.getElementById('sidebar').innerHTML=html;});

    // 获取 assignmentId
    function getAssignmentIdFromUrl() {
        const params = new URLSearchParams(window.location.search);
        return params.get('assignmentId');
    }
    const assignmentId = getAssignmentIdFromUrl();

    // 获取作业基本信息
    fetch('/assignments/' + assignmentId)
        .then(res => res.json())
        .then(response => {
            if (response.success && response.data) {
                const data = response.data;
                document.getElementById('assignment-title').innerText = data.title || '作业详情';
                document.getElementById('assignment-desc').innerText = data.description || '';
            }
        })
        .catch(error => {
            console.error('获取作业信息失败:', error);
        });

    // 获取题目
    fetch(`/assignments/${assignmentId}/questions`)
        .then(res => res.json())
        .then(response => {
            let html = '';
            let totalScore = 0;
            if (response.success && response.data) {
                const questions = response.data;
                if (!questions || questions.length === 0) {
                    html = '<div style="color:#888;text-align:center;margin:40px 0;">暂无题目</div>';
                } else {
                    questions.forEach((q, idx) => {
                        html += `<div class="question-card">`;
                        html += `<div class="question-title">${idx + 1}. ${q.content} <span style="color:#888;">（${q.scoreEarned || 20}分）</span></div>`;
                        if (q.options) {
                            try {
                                const opts = JSON.parse(q.options);
                                for (const key in opts) {
                                    html += `<div class="option">${key}. ${opts[key]}</div>`;
                                }
                            } catch (e) {
                                html += `<div class="option" style="color:red;">选项解析错误</div>`;
                            }
                        }
                        if (q.analysis) {
                            html += `<div style="margin-top:8px;color:#888;font-size:13px;">解析：${q.analysis}</div>`;
                        }
                        if (q.answer) {
                            html += `<div style="margin-top:8px;color:#e07a5f;font-size:14px;">正确答案：${q.answer}</div>`;
                        }
                        if (q.studentOption) {
                            html += `<div style="margin-top:8px;color:#2d6a4f;font-size:14px;">我的答案：${q.studentOption}</div>`;
                        }
                        if (q.isCorrect !== null && q.isCorrect !== undefined) {
                            html += `<div style="color:${q.isCorrect ? '#43aa8b' : '#d90429'};font-size:14px;">${q.isCorrect ? '回答正确' : '回答错误'}</div>`;
                        }
                        if (q.scoreEarned !== null && q.scoreEarned !== undefined) {
                            totalScore += Number(q.scoreEarned);
                        }
                        html += `<div style="margin-top:10px;color:#666;font-size:14px;">题型：${q.type || '未知'} | 难度：${q.difficulty || '未知'}</div>`;
                        html += `</div>`;
                    });
                }
            } else {
                html = '<div style="color:#888;text-align:center;margin:40px 0;">获取题目失败</div>';
            }
            html += `<div style="text-align:right;font-size:18px;font-weight:bold;color:#4361ee;margin:30px 40px 0 0;">总分：${totalScore}分</div>`;
            document.getElementById('assignment-questions').innerHTML = html;
        })
        .catch(error => {
            console.error('获取题目失败:', error);
            document.getElementById('assignment-questions').innerHTML = '<div style="color:#888;text-align:center;margin:40px 0;">获取题目失败</div>';
        });
</script>
</body>
</html>